<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<input class="search-input" v-model="keyword" placeholder="搜索分组名称" confirm-type="search" @confirm="handleSearch" />
				<button class="btn-search" @click="handleSearch">搜索</button>
			</view>
		</view>

		<scroll-view scroll-y class="list">
			<view v-for="group in groupList" :key="group.groupId" class="group-card" @click="goGroupDetail(group)">
				<view class="group-header">
					<view class="group-info">
						<text class="group-name">{{ group.groupName }}</text>
						<text class="group-status" :class="group.status === 1 ? 'active' : 'inactive'">
							{{ group.status === 1 ? '正常' : '禁用' }}
						</text>
					</view>
					<text class="arrow">></text>
				</view>
				<view class="group-desc" v-if="group.description">
					<text>{{ group.description }}</text>
				</view>
				<view class="group-meta">
					<text>排序：{{ group.sortOrder || 0 }}</text>
					<text>创建时间：{{ formatDate(group.createTime) }}</text>
				</view>
			</view>
			
			<view v-if="loading" class="loading">
				<text>加载中...</text>
			</view>
			<view v-if="!loading && groupList.length === 0" class="empty">
				<text>暂无分组</text>
			</view>
		</scroll-view>

		<view class="fab" @click="createGroup">
			<text class="fab-icon">+</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDeviceGroups } from '@/api/device.js'

const loading = ref(false)
const groupList = ref([])
const keyword = ref('')

const formatDate = (date) => {
	if (!date) return '—'
	return new Date(date).toLocaleString('zh-CN')
}

// 获取分组列表
const fetchGroups = async () => {
	try {
		loading.value = true
		const res = await getDeviceGroups()
		console.log('分组列表响应:', res)
		
		if (res && res.code === 200) {
			groupList.value = res.obj || []
		} else {
			uni.showToast({
				title: res?.msg || '获取分组列表失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取分组列表失败:', error)
		uni.showToast({
			title: '网络错误，请重试',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 搜索
const handleSearch = () => {
	// 这里可以实现搜索逻辑
	fetchGroups()
}

// 跳转分组详情
const goGroupDetail = (group) => {
	uni.navigateTo({
		url: `/pages/device/group-detail?groupId=${group.groupId}`
	})
}

// 创建分组
const createGroup = () => {
	uni.navigateTo({
		url: '/pages/device/group-form'
	})
}

onMounted(() => {
	fetchGroups()
})
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background: #f8fffe;
	min-height: 100vh;
}

.header {
	background: #ffffff;
	border: 2rpx solid #e8f5e8;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.search-bar {
	display: flex;
	gap: 12rpx;
}
.search-input {
	flex: 1;
	background: #f7f7f7;
	border-radius: 10rpx;
	padding: 16rpx 20rpx;
}
.btn-search {
	background-color: #2E7D32;
	color: #fff;
	border: none;
	border-radius: 10rpx;
	padding: 0 24rpx;
}

.list { max-height: calc(100vh - 200rpx); }

.group-card {
	background: #ffffff;
	border: 2rpx solid #e8f5e8;
	border-radius: 14rpx;
	padding: 20rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(46,125,50,0.06);
}

.group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.group-info {
	flex: 1;
}

.group-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.group-status {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	
	&.active {
		background: #e8f5e8;
		color: #2E7D32;
	}
	
	&.inactive {
		background: #f5f5f5;
		color: #999;
	}
}

.group-desc {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.group-meta {
	display: flex;
	justify-content: space-between;
	font-size: 22rpx;
	color: #999;
}

.loading, .empty {
	text-align: center;
	color: #999;
	padding: 80rpx 0;
}

.fab {
	position: fixed;
	right: 40rpx;
	bottom: 140rpx;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	background: #2E7D32;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 24rpx rgba(0,0,0,0.2);
}

.fab-icon {
	font-size: 40rpx;
	color: #ffffff;
	font-weight: bold;
}

.arrow {
	font-size: 24rpx;
	color: #ccc;
}
</style>
